<template>
	<!-- 基层服务人员登陆 -->
	<view class="container">
		<view>
			<view class="header-wrap">
				<view class="logo-wrap">
					<image class="logo" src="../static/img/logo.png" mode="widthFix"></image>
				</view>
				<view class="title-wrap">
					<image class="title" src="../static/img/title.png" mode="widthFix"></image>
					<view class="text">关心互联，扶助有道</view>
				</view>
			</view>
			
			<view class="form">
				<!-- 登录 -->
				<view class="row">
					<view class="label">用户名：</view>
					<input class="input" v-model="form.userName" placeholder="请输入用户名" prefixIcon="account-fill" type="text" border="surround"/>
				</view>
				<view class="row">
					<view class="label">密码：</view>
					<input class="input" v-model="form.password"  placeholder="请输入密码" prefixIcon="account-fill" type="text" password border="surround"/>
				</view>
				<!-- 登录按钮 -->
				<view class="button-wrap">
					<button class="button" :disabled="logining" open-type="getUserProfile" @click="login()">登录</button>
				</view>
				<view class="staff-login">
					<text class="link" @click="peopleLogin">受助人员登陆</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import ApiLogin from "@/api/login.js"
	import Store from '@/store/index.js';
	
	import {
		mapMutations
	} from 'vuex';

	export default {
		data() {
			return {
				form:{
					userName: null,
					password: null
				},
				logining: false,
				
				remember: true,
				code: '', //微信临时登录凭证
			}
		},
		created() {
			let userName = Store.getUserName();
			let password = Store.getPassword();
			if(userName){
				this.form.userName = userName;
			}
			if(password){
				this.form.password = password;
			}
		},
		watch:{
			// remember: function(newValue, oldValue){
			// 	if(!newValue){
			// 		Store.clearPassword();
			// 	}
			// }
		},
		methods: {
			...mapMutations(['login']),
			navBack() {
				uni.navigateBack();
			},
			wxLogin() {
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						// 获取用户信息
						uni.request({
							url: config.baseUrl + '/app/getInfo/' + loginRes.code,
							method: "GET",
							success(res) {
								let json = res.data.msg;
								let data = JSON.parse(json);
								let openId = data.openid;
								wx.getUserInfo({
									success(wxUserInfo) {
										uni.setStorageSync('wxUserInfo', wxUserInfo);
									}
								})
							}
						})
					}
				});
			},

			/* 点击登录 */
			login: function() {
				this.logining = true;
				
				let that = this;
				// that.wxLogin();
				if (!this.form.userName || this.form.userName.length == 0) {
					this.logining = false;
					uni.showToast({
						icon: 'none',
						title: '请输入用户名!',
						duration: 2000,
					})
					return;
				} 
				if (!this.form.password || this.form.password.length == 0) {
					this.logining = false;
					uni.showToast({
						icon: 'none',
						title: '请输入密码!',
						duration: 2000,
					})
					return;
				}
				
				//向后台发送请求
				ApiLogin.login(this.form.userName, this.form.password).then(res=>{
					if (res.code == 200) {
						if(res.token && res.token != ''){
							//记住账号
							Store.setUserName(that.form.userName);
							if(that.remember){	//记住密码
								Store.setPassword(that.form.password);
							} else {
								Store.clearPassword();
							}
							//
							ApiLogin.getInfo().then(infoRes =>{
								uni.showToast({
									title: '登录成功',
									mask: true
								})
								setTimeout(() => {
									uni.reLaunch({
										url: '/pages/index/index'
									})
								}, 1500)
							});
						} else {
							this.logining = false;
							uni.showToast({
								icon: 'none',
								title: 'Token错误',
								duration: 2000,
							})
						}
					} else if (res.code == 10002) {
						this.logining = false;
						uni.showToast({
							icon: 'none',
							title: '密码错误',
							duration: 2000,
						})
					} else {
						this.logining = false;
						uni.showToast({
							icon: 'none',
							title: '用户不存在',
							duration: 2000,
						})
					}
				}).catch(err=>{
					this.logining = false;
					uni.showToast({
						icon: 'none',
						title: err.code == 500?'用户或密码错误':'登录错误',
						duration: 2000,
					})
				})
			},
			
			peopleLogin(){
				uni.navigateTo({
					url: '/pages/login'
				})
			},
		},

	}
</script>

<style>
	page {
		background: #fff;
	}

	.container {
		display: flex;
		align-items: center;
		width: 100vw;
		height: 100vh;
		background: #fff;
		box-sizing: border-box;
	}
	
	.header-wrap {
		display: flex;
		justify-content: center;
	}
	.logo{
		width: 180upx;
		margin-right: 30upx;
		
	}
	.title-wrap{
		
	}
	.title-wrap .title{
		width: 340upx;
		
	}
	.title-wrap .text{
		font-size: 16px;
		color: #FF7B00;
		margin-top: 10upx;
	}
	.form{
		width: 750upx;
		padding: 40upx;
		box-sizing: border-box;
		margin-top: 100upx;
	}
	.form .row{
		margin-bottom: 30upx;
	}
	.form .row .label{
		margin-bottom: 15upx;
	}
	.form .row .input{
		padding: 15upx 20upx;
		border: 1upx solid #DCDCDC;
	}
	.form .button-wrap{
		padding-top: 10upx;
	}
	.form .button{
		color: white;
		background: linear-gradient(to bottom, #FF8218, #FFAA00 );
	}
	.staff-login{
		width: 100%;
		padding-top: 30upx;
		display: flex;
		justify-content: flex-end;
	}
	.staff-login .link{
		text-decoration: underline;
		color: #FF7B00;
	}


</style>
